<!--
 * @Date: 2024-12-20 16:01:32
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-12-23 09:33:27
 * @Description: 
-->
<template>
  <div
    class="hp-task-card"
    :style="{
      'grid-template-columns': `repeat(${sliceNum}, minmax(50px,1fr))`
    }"
  >
    <TaskCardItem v-for="statusItem in taskItem.statusItems" 
      :key="statusItem.id"
      :item="statusItem"
      :data="taskData[taskItem.type] || {}"
      :design="design"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue';
import TaskCardItem from './TaskCardItem.vue'

  
const props = defineProps({
  // 是否设计
  design: { type: Boolean, default: false },
  // 拆分个数
  sliceNum: { type: Number, default: 3 },
  // 任务项
  taskItem: { type: Object, default: () => {} },
  // 任务数据
  taskData: { type: Object, default: () => {} },
})

</script>

<style lang="scss" scoped>
.hp-task-card {
  display: grid;
  gap: 12px 12px;
  height: 100%;
  grid-template-columns: repeat(3, minmax(50px,1fr));
}
</style>